﻿
define(function (require, exports, module) {

    require("mixins/global.mixins.js");
    require("components/card/index.js");

    require("node_modules/codemirror/lib/codemirror.css");
    require("node_modules/codemirror/addon/hint/show-hint.css");
    require("node_modules/codemirror/theme/monokai.css");
    require("node_modules/codemirror/lib/codemirror.js");

    require("node_modules/codemirror/mode/htmlmixed/htmlmixed.js");
    require("node_modules/codemirror/addon/hint/show-hint.js");
    require("node_modules/codemirror/addon/hint/html-hint.js");
    require("node_modules/codemirror/addon/mode/loadmode.js");
    require("node_modules/codemirror/mode/javascript/javascript.js");
    require("node_modules/codemirror/addon/selection/active-line.js");
    require("node_modules/codemirror/mode/clike/clike.js");


    require("node_modules/codemirror/addon/hint/sql-hint.js");
    require("node_modules/codemirror/mode/sql/sql.js");
    require("node_modules/codemirror/addon/hint/sql-hint.js");




    require("./index.css");
    var sTpl = require("./index.html");

    var VueComponent = Vue.extend({
        template: sTpl,
        props: {
            "title": {
                default: ''
            },
            "filePath": {
                default: ''
            },
            "collapse": {
                default: false
            },
            'codeString': {
                    default:''
            },
            'codeMod': {
                default: 'htmlmixed'
            },
            'theme': {
                default: ''
            }
        },
        data: function () {
            return {
                fileTpl: ''

            };
        },
        mounted: function () {



            var me = this;

      
            if (me.codeString != "")
            {
                me.fileTpl = me.codeString;
                setTimeout(function () {

                    var config = {
                        mode: me.codeMod || "htmlmixed",
                        lineNumbers: true,
                        styleActiveLine: true,
                        indentWithTabs: true,
                        lineNumbers: true,
                        value: me.codeString
                    };

                    if (me.theme != "")
                    {
                        config.theme = me.theme;
                    }

                    var editor = CodeMirror.fromTextArea($("#fileTpl", me.$el).get(0), config);

                    editor.setOption('value', me.codeString);


                }, 100);
            
            }

            //me.filePath = "components/card/index.html"


            //var map = {
            //    html: "text/html",
            //    js: "text/javascript",
            //    css: 'text/css'
            //};

            //var extend = me.filePath.split(".")[1].toLowerCase();


            //$.ajax({
            //    url: me.filePath,
            //    success: function (fileTpl) {
            //        me.fileTpl = fileTpl;
            //        setTimeout(function () {

            //            var editor = CodeMirror.fromTextArea(document.getElementById("fileTpl"), {
            //                mode: map[extend] || "htmlmixed",
            //                lineNumbers: true,
            //                styleActiveLine: true,
            //                value: me.fileTpl
            //            });

            //            editor.setOption('value', me.fileTpl);

            //        }, 0);
            //    }
            //});


            // require.async(me.filePath, function (fileTpl) {


            //     me.fileTpl = fileTpl


            //     setTimeout(function () {

            //         var editor = CodeMirror.fromTextArea(document.getElementById("fileTpl"), {
            //             mode: map[extend] || "text/html",
            //             height: 800,
            //             width: 600,
            //             extraKeys: { "Ctrl-Space": "autocomplete" },
            //             autoCloseTags: true,
            //             lineNumbers: true,
            //             styleActiveLine: false,
            //             //theme: 'monokai',
            //             value: me.fileTpl
            //         });

            //         editor.setOption('value', me.fileTpl);

            //     }, 0);
            // });
        }
    });

    Vue.component('m-show-code', VueComponent); //都全局注册 同时exports

    module.exports = VueComponent;

});